<template>
  <div>
    <Titlehead uname="今日统计" />
    <div class="centent_showbox onrow_">
 
      <div class="timebox">统计截止时间：{{ moment().format("YYYY/MM/DD HH:mm") }}</div>
      <div class="contes_boxs">
       

        <div class="conteb_onrow">
         
          <div class="title_box">
            <div class="text_minis">总订单（笔）</div>

              <div class="totals"  >83562</div>
            </div>
          <div class="title_box">
            <div class="text_minis">耗电量</div>

            <div class="totals" >87520.787</div>
          </div>
       
        </div>
        <div class="conteb_onrow minsize">
          <div class="title_box">
            <div class="text_minis">使用中订单（笔）</div>

            <div class="totals" >22511</div>
          </div>

          <div class="title_box">
            <div class="text_minis">减少碳排放量（吨）</div>

            <div class="totals"  >18.265</div>
          </div>
        </div>
      </div>
     
    </div>
  </div>
</template>

<script>
import moment from "moment";

import Titlehead from "../firstTitle"; 
export default {
  data() {
    return {
      times: '2023/08/14',
      elcCounts: 0,
      onlineAndChatZeroElcCount: 83562,
      GisIsOnline: 0,
      GisIsNotOnline: 0,
      tojilogin: false,
      elcIsOnlineCounts: 0,
      elcIsNotOnlineCounts: 0,
      moment
    };
  },
  components: {
    Titlehead,
 
  },
  created() {
 
  },
  methods: {
 
 

 

  },
};
</script>

<style lang="scss" scoped>
$contentheight: 210px;
.centent_showbox {
  background: linear-gradient(#14203849, #072a3e6c);
  border-top: 1px solid #314057;
  color: #fff;
  padding: 20px;
}
.onrow_ {
  height: $contentheight;
  .toprow {
    font-size: 20px;
    letter-spacing: 2px;

    .buttj {
      padding: 2px 20px;
      display: inline-block;
      font-size: 15px;
      margin-left: 15px;
      cursor: pointer;
      .el-button--medium {
        background: none;
        border: 1px solid #fff;
        border-radius: 15px;
        color: #fff;
      }
    }
  }

  .timebox {
    font-size: 15px;
    line-height: 45px;
    color: #6fbcf0;
  }
  .contes_boxs {
    // display: flex;
    // flex-direction: row;
    display: grid;
    grid-template-columns: 50% 50%;
  }
}
.conteb_onrow {
  // width: calc(100% / 3);
  // background: red;
  // height: 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  // align-items: center;
}
.totals {
  font-family: "PangMenZhengDao";
  font-size: 40px;
  color: #f7f7f7;
  cursor: pointer;
}
.text_minis {
  font-size: 20px;
  color: #aeb3bb;
  // margin-left: 10px;
  //   font-family: "PangMenZhengDao";
}
.first_ {
  display: flex;
  flex-direction: row;
  // align-items: center;
}
.title_box {
  // margin-left: 10px;
  display: flex;

  flex-direction: column; 
  margin-bottom: 10px;
  flex-direction: column;
    align-items: flex-start;
    margin-bottom: 10px;
    justify-content: flex-start;
  .totals {
    font-size: 30px;
    color: #10f9f6;
    width:100%;
    text-align: left;
  }
}
.minsize {
  // align-items: flex-start;
  // text-indent: 25px;
  .totals {
    // font-size: 20px;
    color: #0888d5;
  }
}
</style> 